<template lang="pug">
  div
    div(v-if="$route.path === '/educational/courseManage/course'" v-loading="loading")
      el-row
        el-col(:span="16")
          el-radio-group.tabTypes(v-model="curTabKey" style="margin-bottom: 24px" @change="change")
            el-radio-button(v-for="(tab, key) in tabs" :key="key" :label="key") {{tab.title}}
      s-table(
        ref="table"
        :reqUrl="reqUrl"
        reqMethod="POST"
        :column="columnConfig"
        :filterProps="{fields: searchConfig}"
        :queryPropsParams="{ areaId: curArea.areaId, type: curTabKey }"
      )
        template(slot="month" slot-scope="text, scope")
          span {{scope.ageLow}}-{{scope.ageHigh}}月龄
        template(slot="action" slot-scope="text, scope")
          el-link( @click="actionHandle(scope, 'view')" type="primary") 详情
    router-view(v-else)
</template>
<script>
import { mapGetters } from 'vuex'
import { column, columnFamily } from './config'
import { getCourseDict } from './api'

export default {
  data () {
    return {
      loading: false,
      curTabKey: 0,
      tabs: [
        { key: 0, title: '机构端' },
        // { key: 1, title: '家庭端' },
        { key: 2, title: '小群体课程' }
      ],

      courses: [],
      tableObj: {
        column
      },

      monthList: [],
      faceList: [],
      weekList: []
    }
  },
  computed: {
    ...mapGetters(['curArea']),
    reqUrl () {
      return 'api/vendor_courseV2/courseListV2'
    },
    columnConfig () {
      if (this.curTabKey === 2) {
        return columnFamily
      } else {
        return column
      }
    },
    searchConfig () {
      if (this.curTabKey === 2) {
        return [
          {
            key: 'age',
            label: '请选择月龄',
            type: 'select',
            fieldProps: {
              options: this.monthList,
              props: { value: 'dictValue', label: 'dictLabel' }
            }
          },
          {
            key: 'week',
            label: '请选择周次',
            type: 'select',
            fieldProps: {
              options: this.weekList,
              props: { value: 'dictValue', label: 'dictLabel' }
            }
          },
          {
            key: 'title',
            label: '请输入课程名称'
          }
        ]
      } else {
        return [
          {
            key: 'age',
            label: '请选择月龄',
            type: 'select',
            fieldProps: {
              options: this.monthList,
              props: { value: 'dictValue', label: 'dictLabel' }
            }
          },
          {
            label: '请选择面向类别',
            key: 'face',
            type: 'select',
            fieldProps: {
              options: this.faceList,
              props: { value: 'dictValue', label: 'dictLabel' }
            }
          },
          {
            key: 'week',
            label: '请选择周次',
            type: 'select',
            fieldProps: {
              options: this.weekList,
              props: { value: 'dictValue', label: 'dictLabel' }
            }
          },
          {
            key: 'title',
            label: '请输入课程名称'
          }
        ]
      }
    }
  },
  created () {
    this.getCourseDict()
  },
  methods: {
    actionHandle (row, type) {
      this.goInfo(row)
    },
    goInfo (course) {
      this.$router.push({
        path: '/educational/courseManage/course/detail',
        query: {
          courseId: course.id,
          courseType: this.curTabKey,
          courseName: course.title
        }
      })
    },

    getCourseDict () {
      getCourseDict({ dictType: 'tc_month', type: this.curTabKey }).then(res => {
        this.monthList = res
      })
      if (this.curTabKey === 0) {
        getCourseDict({ dictType: 'tc_face', type: this.curTabKey }).then(res => {
          this.faceList = res
        })
      } else if (this.curTabKey === 1) {
        getCourseDict({ dictType: 'tc_face', type: this.curTabKey }).then(res => {
          this.faceList = res
        })
      }
      getCourseDict({ dictType: 'tc_week', type: this.curTabKey }).then(res => {
        this.weekList = res
      })
    },

    change () {
      this.getCourseDict()
      this.$refs.table.reloadFilter()
    }
  }
}
</script>
<style lang="scss" scoped>
.appendix {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.course {
  margin-bottom: 20px;

  h3 {
    margin-top: 20px;
    font-size: 17px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
  }
}

.tabTypes {
  ::v-deep {

    .el-radio-button {
      background-color: #EEF1F4 !important;
      padding: 4px;
      border-radius: 3px;
    }

    .el-radio-button__inner {
      background-color: #EEF1F4 !important;
    }

  }
}
</style>
